<template >
    <div class="community-bigbox">
           <div class="community-top">
            <h4>藤养学园社区</h4>
           </div>
           <!-- 下拉选择器 -->
           <div>
            <ul class="workStatus">
          <li>
            <el-select
              v-model="optionVal"
              placeholder="请选择"
              style="width: 240px"
              @change="selectChange"
            >
              <el-option
                class="option"
                :value="item.value"
                v-for="item in selectArr"
                :key="item.id"
                @click="onSelect(item)"
                ><span style="float: left">{{
                  item.label
                }}</span>
                <span
                  v-if="item.value !== '全部'&&!userA.EditeScore"
                  style="float: right"
                  @click="clearArr(item)"
                >
                  <el-icon><CloseBold /></el-icon> </span
              ></el-option>
              <template #footer v-if="!userA.EditeScore">
                <span
                  v-if="!isAdding"
                  text
                  bg
                  size="small"
                  @click="onAddOption"
                  style="cursor: pointer;"
                >
                  新建分组
                </span>
                <template v-else>
                  <el-input
                    v-model="optionName"
                    class="option-input"
                    placeholder="请输入新的分支"
                    size="small"
                    style="margin-bottom: 7px"
                  />
                  <div>
                    <el-button type="primary" size="small" @click="onConfirm">
                      确定
                    </el-button>
                    <el-button size="small" @click="clear">取消</el-button>
                  </div>
                </template>
              </template>
            </el-select>
          </li>
          </ul>
           </div>
          
        <!-- 搜索框 -->
        <div>
          <el-input v-model="input" style="width: 240px" placeholder="Please input" />
          <el-button @click="searchA">搜索</el-button>
        </div>

    </div><br><br>
     <Interaction :type="type" :Share="Share" @custom-event="StateInit"></Interaction>
   </template>
   
   <script setup>
   import { ref,onMounted,watch } from 'vue'
   import Interaction from '../../../components/Interaction.vue';

   import {getShareComm,getSelect,addSelect,delSelect} from '../../../api/index'
  //  const value = ref('全部')
   const type=ref('6')

//获取用户信息
let user=localStorage.getItem("user");
let userA=JSON.parse(user);



let ShareA=ref()
//分类之后的数据
const Share=ref()
let init=(async()=>{
    let res=await getShareComm()
    console.log(res)
    if(res.data.code==0){
      ShareA.value=res.data.data
      Share.value=res.data.data
    }

    console.log(ShareA)
})



// 下拉框
const optionVal = ref("全部");
const selectArr = ref();

const selectLisr= async ()=>{
  let res=await getSelect(type.value)
  console.log(res)
  if(res.data.code==0){
    selectArr.value=res.data.data
  }
}

 
onMounted(()=>{
    init()
    selectLisr()
  })

const StateInit=(data)=>{
    console.log(data)
    Share.value=data
}



//搜索
let input=ref()
const searchA=()=>{
  console.log(input.value)
  let res=Share.value.filter((item)=>{
    return item.title.indexOf(input.value)!=-1
  })
  console.log(res)
  Share.value=res
}



const isAdding = ref(false);
const optionName = ref("");
const onAddOption = () => {
  isAdding.value = true;
};

//新建
const onConfirm =async() => {
  if (optionName.value) {
    let res=await addSelect({
      label: optionName.value,
      value: optionName.value,
      type:type.value
    })
    selectLisr()
    clear();
  }
};
//分类删除
const clear = () => {
  optionName.value = "";
  isAdding.value = false;
};
let delData = ref({});
const clearArr =async (data) => {
  console.log(data)
  delData.value = data;
  let res=await delSelect(delData.value.id,type.value)
  console.log(res)
  if(res.data.code==0){
    selectLisr()
  }
  optionVal.value ="全部";
  onSelect()
  console.log("selectArr.value: ", selectArr.value);
  console.log("optionVal.value: ", optionVal.value);
};


const selectChange =async() => {
  console.log('1')
 
};


//分类
const onSelect = (data)=>{
  console.log(data)
    Share.value=ShareA.value.filter((item)=>{
       if(item.type==data.value){
        return item
       }else if(data.value=='全部'){
        return ShareA.value
       }
    })
};



</script>
<style scoped>
.community-bigbox {
  width: 100%;
  height: 100%;
}
.community-top {
  width: 60%;
  height: 80px;
  background-color: white;
  line-height: 80px;
}
.community-top h4 {
  font-size: 20px;
  margin-left: 20px;
}
</style>
